<template>
	<view>
		<uni-nav-bar :statusBar="true" dark title="分组" fixed left-icon="left" @clickLeft="clickLeft">
			<block slot="right">
				<view class="city">
					<view @click="onCreated">
						<uni-icons color="#fff" fontFamily="CustomFont" type="plusempty" :size="20"></uni-icons>
					</view>
				</view>
			</block>
		</uni-nav-bar>
		<view>
			<uni-search-bar clearButton="none"  cancelButton="none" @confirm="search"></uni-search-bar>
		</view>
		<view class="content">
			<view class="fenzu">
				<view>分组名称</view>
				<view style="color: #ed6d44;">{{name}}</view>
			</view>
		</view>
		<view class="titleText">为当前分组选择球队</view>
		<view class="content2" @click="changeGroup(item.id)" v-for="(item,index) in list" :key="index" @longpress="del(item,index)">
			<view>{{item.teamName}}</view>
		</view>
		
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popupbox">
				<view style="margin-bottom: 200rpx;overflow-y: scroll;">
					<view v-for="(item,index) in grouplist" :key="index" @click="pushGroup(item)" :class="item.id == groupId ? 'listGroup active' : 'listGroup'">
						{{item.name}}( {{item.num != null ? item.num : '0'}} 只球队)
					</view>
				</view>
				<view class="bottomBtn">
					<button @click="$refs.popup.close();" type="submit" class="submit">
						取消
					</button>
					<button @click="onPutSave" type="submit" class="submit">
						保存
					</button>
				</view>
			</view>
		</uni-popup>
		
		<view class="bottomBtn">
			<button @click="onCreated" type="submit" class="submit">
				快速添加
			</button>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		createTeamGrouping, getTeanGroupingPlayTeam, getTeamGroupingList, delTeanGroupingPlayTeam, putteamGrouping
	} from '@/api/basketballTeam/index.js'
	export default {
		data() {
			return {
				name:'',
				id: '',
				choose: true,
				list: [],
				pageData: {
					pageSize: 10,
					pageNum: 1
				},
				total: 0,
				loadingType: 'more',
				grouplist: [],
				groupId: '',
			}
		},
		onLoad(option) {
			this.name = option.name
			this.id = option.id
		},
		onShow() {
			this.pageData = {
				pageNum: 1,
				pageSize: 10
			}
			this.list = []
			this.getList()
		},
		async onReachBottom() {
			if (this.list.length == this.total) {
				this.loadingType = 'no-more'
				return;
			}
			this.loadingType = 'loading'
			this.pageData.pageNum += 1
			this.getList()
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			search(val) {
				console.log(val)
				this.seasonName = val.value;
				 this.getList();
			},
			onCreated() {
				uni.navigateTo({
					url: '/pages/createGroup/team?id=' + this.id
				})
			},
			changeGroup(id) {
				this.$refs.popup.open();
				this.teamId = id
				getTeamGroupingList().then(res => {
					console.log(res,"res---------")
					this.grouplist.push(...res.rows)
				})
			},
			del(item) {
				uni.showModal({
					content: '确定移除吗？',
					success: (res) => {
						if (res.confirm) {
							delTeanGroupingPlayTeam(item.id).then(res => {
								this.list = []
								this.pageData = {
									pageSize: 10,
									pageNum: 1
								}
								this.getList();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			pushGroup(item) {
				this.groupId = item.id
			},
			onPutSave() {
				putteamGrouping({
					id: this.teamId,
					teamGroupingId: this.groupId
				}).then(res => {
					this.$modal.msg(res.msg)
					this.$refs.popup.close();
					this.getList()
					console.log(res,"-----")
				})
			},
			getList() {
				getTeanGroupingPlayTeam({
					teamGroupingId: this.id
				}).then(res => {
					this.total = res.total
					this.list.push(...res.rows)
					if (this.list.length == this.total) {
						this.loadingType = 'no-more'
						return;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 40rpx 20rpx 0 20rpx;

		.logo {
			display: flex;
			align-items: center;
			padding-bottom: 40rpx;
		}
		.fenzu{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
		}
	}
	.contentList {
		display: flex;
		padding: 30rpx;
		align-items: center;
		font-weight: 600;
	}
	.active{
		background: #eee;
	}
	.content2{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.titleText{
		background: #f9fafc;
		padding: 20rpx 30rpx;
	}
	
	.bottomBtn {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
		position: absolute;
		width: 100%;
		bottom: 0;
		padding: 40rpx 30rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
		border-top: 1px solid #eee;
		.submit-text {
			display: flex;
			
			font-size: 24rpx;
		}
		.submit {
			background-color: $btn-bg-color;
			color: #fff;
			width: 100%;
			font-size: 34rpx;
			font-weight: 800;
			margin-top: 20rpx;
		}
	}
	::deep .uni-collapse-item--animation {
		.uni-icons{
			color: #fff;
		}
		
	}
	.popupbox {
		background-color: #fff;
		height: 600rpx;
		// min-height: 600rpx;
		overflow-y: scroll;
		.listGroup{
			padding: 30rpx;
			font-size: 30rpx;
			font-weight: 600;
		}
		.active{
			background: #eee;
		}
		.content {
			padding: 40rpx 20rpx;
		
			.logo {
				display: flex;
				align-items: center;
				padding-bottom: 40rpx;
			}
		}
		.bottomBtn {
			display: flex;
			justify-content: center;
			flex-direction: row;
			background-color: #fff;
			position: absolute;
			width: 100%;
			bottom: 0;
			padding: 40rpx 30rpx;
			padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
			border-top: 1px solid #eee;
			.submit-text {
				display: flex;
				
				font-size: 24rpx;
			}
			.submit {
				background-color: $btn-bg-color;
				color: #fff;
				width: 48%;
				font-size: 34rpx;
				font-weight: 800;
				margin-top: 20rpx;
			}
		}
	}
</style>